<script setup lang="tsx">
import { reactive, ref } from 'vue';
import { useDictStore } from '@/store/modules/dict';
import { agvtaskissuancerecord } from '../../../service/api/modules/agv/menu';
import Search from './modules/search.vue';

const { getDict } = useDictStore();
const stateMaping: any = ref({});

getDict('agv_transport_status').then(dict => {
  dict.forEach((item: any) => {
    stateMaping.value[item.value] = item.label;
  });
});

console.log('stateMaping', stateMaping.value);

const searchParams = ref({
  taskName: null,
  materialLot: null,
  machineNo: null
});
const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const tableData = ref([]);
const loading = ref(false);
const columnChecks = ref<any[]>([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'taskName',
    dataIndex: 'taskName',
    title: '任务名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'taskType',
    dataIndex: 'taskType',
    title: '任务类型',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'taskStatus',
    dataIndex: 'taskStatus',
    title: '任务状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return stateMaping.value[record.taskStatus];
    }
  },
  {
    key: 'podCode',
    dataIndex: 'podCode',
    title: '托盘编号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'materialLot',
    dataIndex: 'materialLot',
    title: '物料批次',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'machineNo',
    dataIndex: 'machineNo',
    title: '机台号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'rebotCode',
    dataIndex: 'rebotCode',
    title: 'AGV编号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'startCoo',
    dataIndex: 'startCoo',
    title: '任务起始坐标',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'endCoo',
    dataIndex: 'endCoo',
    title: '任务结束坐标',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '操作人',
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
function reset() {
  search();
}

function search() {
  pagination.current = 1;
  getData();
}
// 获取页面数据
function getData() {
  loading.value = true;
  agvtaskissuancerecord({
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    ...searchParams.value
  })
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item: any, index: number) => {
          item.index = index + 1;
        });
        tableData.value = data.list;
        pagination.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}
getData();

const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      // 设置字体颜色
      // 'color': record.id === this.leftAlignId ? '#fff' : '',
      //  设置行背景色
      // 'background-color': record.uid === currentRowId.value ? 'rgba(86, 205, 243, 0.3)' : ''
      // 设置字体类型
      // 'font-family': 'Microsoft YaHei',
      // // 下划线
      // 'text-decoration': 'underline',
      // // 字体样式-斜体
      // 'font-style': 'italic',
      // // 字体加粗
      // 'font-weight': 'bold'
      background: record.id === currentRowId.value ? '#BAEAFA' : ''
    },
    class: record.id === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.id;
    }
  };
};

// const { handleShow, handleLoading, handleClose } = window.$useModal({
//   // modalOption的参数除了visible以外，其他通上表参数表格，注意：请不要传递visible到配置项中
//   modalOption: {
//     title: '弹窗测试',
//     confirmBtnText: '提交',
//     destroyOnClose: true,
//     width: '800px',
//     height: '70vh'
//   },
//   // 表单的默认值
//   formData: {
//     appVersion: '1.0.3'
//   },
//   // 参数通Form组件中的参数
//   formList: [
//     {
//       type: 'tabs',
//       name: '基本信息',
//       span: 24
//     },
//     {
//       type: 'input',
//       key: 'appVersion',
//       label: '版本号',
//       placeholder: '请输入版本号',
//       span: 24,
//       rule: {
//         required: true,
//         message: '请输入版本号',
//         trigger: 'change'
//       }
//     },
//     {
//       type: 'textarea',
//       key: 'appUpdateInfo',
//       label: '更新信息',
//       placeholder: '请输入更新信息',
//       span: 24
//     },
//     {
//       type: 'textarea',
//       key: 'appRemark',
//       label: '备注',
//       placeholder: '请输入备注',
//       span: 24
//     }
//   ],
//   onOk: model => {
//     // 注意，如果表单校验值有问题，将不会执行到这里
//     console.log('model', model);
//     // 后续调取后端接口
//     handleLoading(true);
//     setTimeout(() => {
//       handleLoading(false);
//       handleClose();
//     }, 1500);
//   }
// });
</script>

<template>
  <div class="jl-main-page one-code-ascend min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="reset" @search="search" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #extra>
        <!-- <AButton @click="handleShow">弹窗</AButton> -->
        <TableColumnSetting v-model:columns="columnChecks" />
      </template>
      <STable
        :columns="columnChecks"
        :data-source="tableData"
        bordered
        size="small"
        :loading="loading"
        row-key="id"
        :pagination="pagination"
        :custom-row="customRow"
        :scroll="{ y: 'auto' }"
        :row-height="23"
        class="h-full"
      />
    </ACard>
  </div>
</template>

<style></style>
